<template>
    <scroller class="wrapper">
        <text ondisappear="tabbarState('up')" onappear="tabbarState('')" class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" style="color:#000">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
        <text class="text" :style="{color:color}">{{text}}</text>
    </scroller>
</template>

<style>
    .wrapper {

        align-items: center;
        justify-content: center;
    }
    .text {
        font-size:60;
        font-weight: bold;
    }
</style>

<script>
    module.exports = {
        data: {
            color: '#ff0000',
            text: '',
        },
        created: function() {
            this.color = '#694e4e';
            this.text = 'This is Tab 4 Test.';
        },
        methods:{
            tabbarState(data){
                this.$emit("State",{
                    state:data==="up"?"hide":"show"
                });
            }
        }
    }
</script>